<template>
    <HRContainer title="单位管理">
      <div>
        <!-- <div v-hasPermi="[1]">11111</div>
      <div @click="onClick">dffff</div> -->
        <HRUpload
          :uploadVisable="dialogVisible"
          @handleClose="handleClose"
          @handleConfirm="handleConfirm"
        ></HRUpload>
        <HRTable
          :tableData="tableData"
          :config="tableConfig"
          :loading="loading"
          @optionOclick="optionOclick"
          @sizeChange="sizeChange"
          @handleCurrentChange="handleCurrentChange"
          @linkOnClick="linkOnClick"
        >
          <template v-slot:buttonTool>
            <el-button type="primary" icon="Plus" plain @click="addTest"
              >新增</el-button
            >
            <el-button type="danger" icon="Delete" plain>删除</el-button>
            <el-button type="success" icon="Upload" plain @click="uploadAction"
              >上传</el-button
            >
          </template>
        </HRTable>
        <HRDialog
          :dialogVisable="testVisable"
          @handleClose="handleCloseTest"
          @handleConfirm="handleConfirmTest"
        >
          <div>哈哈哈</div>
        </HRDialog>
      </div>
    </HRContainer>
  </template>
  
  <script setup name="logManager">
  import { ref } from "vue";
  import { useBtnPermiStore } from "@/store/buttonPermi";
  import HRContainer from "@/components/HRContainer";
  import HRTable from "@/components/HRTable";
  import HRUpload from "@/components/HRUploadDialog";
  import HRDialog from "@/components/HRDialog";
  const btnPermiStore = useBtnPermiStore();
  btnPermiStore.test();
  console.log(btnPermiStore.btnPermis);
  
  // const onClick = () => {
  //   btnPermiStore.changeValue()
  //   console.log(btnPermiStore.btnPermis)
  // }
  const loading = ref(false);
  const tableConfig = {
    searchConfig: [
      {
        type: "input",
        label: "单位",
        prop: "dept",
      },
      {
        type: "select",
        label: "性别",
        prop: "sex",
        selectOptions: [
          {
            text: "男",
            value: 1,
          },
          {
            text: "女",
            value: 2,
          },
        ],
      },
      {
        type: "datePicker",
        label: "时间",
        prop: "date",
      },
    ],
    column: [
      {
        label: "名字",
        prop: "name",
        formatter: (row) => {
          console.log(row.name);
          return row.name + "2222";
        },
      },
      {
        label: "年龄",
        prop: "age",
      },
      {
        label: "性别",
        prop: "sex",
      },
      {
        label: "单位",
        prop: "company",
      },
      {
        type: "option",
        buttonConfig: [
          {
            id: "edit",
            icon: "Edit",
            label: "查看",
          },
          {
            id: "edit",
            icon: "Edit",
            label: "查看1",
          },
          {
            id: "delete",
            type: "danger",
            icon: "Delete",
            label: "删除",
          },
        ],
      },
    ],
  };
  
  const tableData = ref([
    { id: 1, name: "张三", age: 15, sex: "男", company: "华软科技" },
    { id: 2, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
    {
      id: 3,
      name: "张三1",
      age: 151,
      sex: "男1",
      company: "华软科技1",
      children: [
        { id: 4, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
        { id: 5, name: "张三1", age: 151, sex: "男1", company: "华软科技1" },
      ],
    },
  ]);
  
  function optionOclick(btnID, data) {
    console.log(btnID, data);
  }
  function sizeChange(value) {
    tableData.value = [
      { id: 12, name: "李四", age: 34, sex: "女", company: "小点点都得" },
    ];
    console.log("sizeChange", value);
  }
  function handleCurrentChange(value) {
    console.log("handleCurrentChange", value);
    loading.value = false;
  }
  const linkOnClick = (data) => {
    console.log(data);
  };
  
  const dialogVisible = ref(false);
  
  const uploadAction = () => {
    console.log("aaaa");
    dialogVisible.value = true;
  };
  const handleClose = () => {
    dialogVisible.value = false;
  };
  
  const handleConfirm = () => {
    dialogVisible.value = false;
  };
  
  const testVisable = ref(false);
  const addTest = () => {
    testVisable.value = true;
  };
  
  const handleCloseTest = () => {
    testVisable.value = false;
  };
  
  const handleConfirmTest = () => {
    testVisable.value = false;
  };
  </script>
  
  <style scoped lang="scss">
  .clipboard-container {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
  
    .copv-wrapper {
      padding-top: 20px;
    }
  }
  </style>
  